<template>
  <div id="app">
    <transition :name="name">
      <router-view/>
    </transition>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        name: ''
      }
    },
    watch: {
      $route(n) {
        const { index } = n.meta
        if(typeof index != 'number') return this.name = ''
        if(index <= 0) {
          this.name = 'slide-out'
        }else{
          this.name = 'slide-in'
        }
      }
    }
  }
</script>

<style lang="less">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
}
html, body{
  margin: 0;
  padding: 0;
}

.slide-in-enter-active,
.slide-in-leave-active,
.slide-out-enter-active,
.slide-out-leave-active{
  transition: all .5s;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.slide-in-leave,
.slide-in-enter-to,
.slide-out-leave,
.slide-out-enter-to {
  transform: translateX(0);
}
.slide-in-leave-to,
.slide-out-enter{
  transform: translateX(-100%);
}

.slide-in-enter,
.slide-out-leave-to{
  transform: translateX(100%);
}
</style>
